<template>
    <div>
        <el-upload :action="action"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="autoUpload"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload"
        >
        <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog v-model="dialogVisible" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [
                {
                    //name: 'food.jpeg', 
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }, 
                {
                    //name: 'food2.jpeg', 
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                    }
            ],
            action: 'http://localhost:10020/sys/img/upload',
            autoUpload: true,
        }
    },
    methods: {
        handleRemove(file, fileList) {
            this.fileList = fileList;
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        uploadSuccess(response, file, fileList){
            // this.fileList = fileList;
            console.log("fileList:",fileList)
            //console.log("response:",response)
            //console.log("file:",file)
            file.url = response.data[0];
            this.fileList = fileList;
        },
        uploadError(err, file, fileList){
            // console.log(err)
            // console.log(file)
            // console.log(fileList)
        },
        beforeUpload(file){
            if(this.fileList.length>=5){
                console.log("超过5张了!")
                this.$message({
                    showClose: true,
                    message: "最多只能上传5张图片",
                    type: 'error'
                })
                return false;
            }
        }
    }
}
</script>
